<template>
  <div class="card">
    <div class="card-header">
      <!-- 头部插槽 -->
      <slot name="header"></slot>
    </div>
    <hr />
    <div class="card-body">
      <!-- 中部插槽 -->
      <slot name="body"></slot>
    </div>
    <hr />
    <div class="card-footer">
      <!-- 底部插槽 -->
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "Card",
  props: ["title"]
};
</script>

<style scoped>
.card {
  border: 1px solid #eee;
  border-radius: 5px;
  margin-bottom: 10px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
}
.card-header {
  border-bottom: 1px solid #eee;
  padding: 20px;
}
.card-body {
  padding: 20px;
}
.card-footer {
  border-top: 1px solid #eee;
  padding: 20px;
}
</style>

